@basecolor: #246ef9;
@pricecolor: #fa436a;
@page-row-spacing: 20rpx;
@page-col-spacing: 20rpx;
@page-padding: 24rpx;
@page-margin: 24rpx;
@page-border-radius: 8rpx;

// 间距变量
@spacing-xs: 8rpx;
@spacing-sm: 12rpx;
@spacing-md: 16rpx;
@spacing-lg: 24rpx;
@spacing-xl: 32rpx;
@spacing-xxl: 48rpx;

// 圆角变量
@border-radius-xs: 4rpx;
@border-radius-sm: 6rpx;
@border-radius-md: 8rpx;
@border-radius-lg: 12rpx;
@border-radius-xl: 16rpx;
@border-radius-xxl: 20rpx;

// 颜色变量
@primary-color: @basecolor;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@info-color: #1890ff;
@text-color: #333333;
@text-color-secondary: #666666;
@text-color-disabled: #999999;
@border-color: #d9d9d9;
@background-color: #f7f8fb;
@white: #ffffff;
@black: #000000;

// 字体大小
@font-size-xs: 20rpx;
@font-size-sm: 24rpx;
@font-size-md: 28rpx;
@font-size-lg: 32rpx;
@font-size-xl: 36rpx;
@font-size-xxl: 40rpx;

// 阴影
@box-shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
@box-shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
@box-shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);

// 动画时间
@transition-fast: 0.2s;
@transition-normal: 0.3s;
@transition-slow: 0.5s;

view,
text,
input,
button {
	box-sizing: border-box;
}
text {
	display: inline-block;
}
image {
	display: block;
	object-fit: cover;
}

/* 通用高度适配类 */
.min-height-100vh {
	min-height: 100vh;
	/* #ifdef MP-WEIXIN */
	min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	/* #endif */
	/* #ifdef H5 */
	min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	/* #endif */
}

.height-100vh {
	height: 100vh;
	/* #ifdef MP-WEIXIN */
	height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	/* #endif */
}

.fix-c {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.fix-c-x {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.fix-c-y {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-center-y {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
button {
	background: none;
	border: none;
	outline: none;
}
button[disabled] {
	background-color: #999999 !important;
	color: #ffffff !important;
	opacity: 1;
}
.button-hover {
	transition: opacity 0.3s ease;
}
// button:active {
//   position: relative;
// }
// button:active::after {
//   content: "";
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   width: 0;
//   height: 0;
//   background-color: rgba(0, 0, 0, 0.2);
//   border-radius: 100%;
//   transform: translate(-50%, -50%) scale(0, 0);
//   opacity: 1;
//   transition: all 0.3s ease-out;
// }

// button:active::after {
//   width: 200px;
//   height: 200px;

//   opacity: 0;
//   transform: translate(-50%, -50%) scale(1, 1);
// }

.line-1 {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 1; //行数
	line-clamp: 1;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.line-2 {
	// display: block;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 2; //行数
	line-clamp: 2;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.line-3 {
	// display: block;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 3; //行数
	line-clamp: 3;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}

.clearFix {
	&::after {
		content: '';
		display: block;
		clear: both;
	}
}

.j-active {
	&:active {
		opacity: 0.5;
	}
}
.j-active2 {
	&:active {
		background: rgba(0, 0, 0, 0.1);
	}
}

.bor {
	border: 1rpx solid red;
}
.bob {
	border: 1rpx solid blue;
}
.sc {
	text-decoration: line-through;
	color: #999999 !important;
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-10px);
	}
	50% {
		transform: translateX(10px);
	}
	75% {
		transform: translateX(-10px);
	}
	100% {
		transform: translateX(0);
	}
}
